<template>
	<view class="group-tree-item" v-if="defaultP&&defaultP.id&&item" :style="parent.id?'':'margin-bottom:16rpx'">
		<view class="head" @click.stop="changeShow">
			<image
				src="/static/images/down_pie.png"
				:class="show ? 'rt45' : ''"
				mode="scaleToFill"
				class="left-icon"
				v-if="item[defaultP.children] && item[defaultP.children].length > 0"
			></image>
			<view class="txt" @click.stop="chooseItem" >
				<uni-icons v-if="item.choosed&&!item.half" color="#0091ff" type="checkbox-filled" class="txtIcon"/>
				<uni-icons v-if="item.half" color="#0091ff" type="minus-filled" class="txtIcon"/>
				<uni-icons v-if="!item.choosed&&!item.half" color="#ccc" type="circle" class="txtIcon" /> 
				<text v-for="(txt,tidx) in item[defaultP.label]" :key="tidx" :style="keywords&&tidx>=highs[0]&&tidx<=highs[1]?'color:#0091FF':''">{{ txt }}</text>
			</view>
			</view>
		<view class="content" v-if="item[defaultP.children] && item[defaultP.children].length > 0" v-show="show">
			<group-tree :keywords="keywords" :selectIds="selectIds" :select="selectGroup.indexOf(item.id)!=-1||select" :selectGroup="selectGroup" :parent="item" v-for="sitem in item[defaultP.children]" :item="sitem" :key="sitem.id" :defaultProps="defaultP"></group-tree>
		</view>
	</view>
</template>

<script>
export default {
	name: 'group-tree',
	componentName: 'group-tree',

	props: {
		// 关键词
		keywords:{
			type:[Number,String],
			default:''
		},
		// 类型：1人或2部门
		selectType:{
			type:[Number,String],
			default:1
		},
		select:{
			type:Boolean,
			default:false
		},
		selectIds:{
			type:String,
			default:''
		},
		selectGroup:{
			type:String,
			default:''
		},
		parent: {
			type: Object,
			default: () => {
				return {};
			}
		},
		item: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	inject: ['defaultProps', 'onClickItem'],
	computed: {
		// 高亮字符
		highs() {
			if (!this.keywords) {
				return [-1,-1];
			}
			let txt = this.item[this.defaultP.label];
			let idx = txt.indexOf(this.keywords);
			
			return idx == -1 ? [-1,-1] : [idx,idx + this.keywords.length - 1];
		},
		defaultP() {
			return this.defaultProps || {};
		}
	},
	data() {
		return {
			choosed:false,
			show: false,
			// 当前项目是否选中 1未选中 2半选 3选中
			selectState:1,
		};
	},
	watch:{
		item() {
			// console.log( 'item',this.item,this.defaultP);
			// if(val.show==true){
			// 	this.show=true
			// }else{
			// 	this.show=false
			// }
		}
	},
	created() {
		// console.log(this.defaultP,'item',this.item);
		if (this.item && this.item.show == true && this.defaultP && this.defaultP.id) {
			this.show = true;
		}
	},
	methods: {
		changeShow() { 
			// this.choosed=!this.choosed
			// this.item.choosed=this.choosed
			// this.$forceUpdate()
			// console.log(this.selectIds,this.selectGroup,this.item)
		
			if (this.item[this.defaultProps.children] && this.item[this.defaultProps.children].length > 0) {
				this.show = !this.show;
			}
		},
		chooseItem() {
			this.onClickItem({...this.item,parent:this.parent});
		}
	}
};
</script>

<style scoped lang="scss">
@mixin animate2 {
	-moz-transition: all 0.2s linear;
	-webkit-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
.group-tree-item {
	padding: 10rpx 0rpx;
	padding-left: 10rpx;
	background-color: #fff;

	.head {
		display: flex;
		align-items: center;
		line-height: 60rpx;
		.txt {
			font-size: 28rpx;
			color: #333;
			// flex: 1;
			.textColor{
				color: #333;
			}
			.textColorTwo{
				color: #999;
			}
			.textColorOne{
				color: #0091FF;
			}
			.txtIcon{
				margin-right:4rpx
			}
		}
	}
	.right-ifon {
		margin-right: 30rpx;
		width: 30rpx;
		height: 30rpx;
		margin-left: 12rpx;
		transform: rotate(-90deg);
	}
	.left-icon {
		margin-right: 10rpx;
		width: 20rpx;
		height: 20rpx;
		@include animate2;
		transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-webkit-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);
		&.rt45 {
			transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			-moz-transform: rotate(0deg);
			-webkit-transform: rotate(0deg);
			-o-transform: rotate(0deg);
		}
	}
	.content {
		padding-left: 40rpx;
	}
}
</style>
